<template>
  <div id="login">
    <div class="login-wrap">
      <!-- <Return title="修改登录密码"></Return> -->
      <div class="login-header">
        <span class="login-login">登录</span>
        <span class="login-register">
          <router-link to="/register">注册</router-link>
        </span>
      </div>
      <div class="form-body">
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
          <el-form-item prop="phone" class="custom-input">
            <el-input
              placeholder="请输入手机号"
              v-model="ruleForm.phone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" class="custom-input">
            <el-input
              type="password"
              v-model="ruleForm.password"
              placeholder="请输入密码"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="forget-password">
        <router-link to="/forgetPassword">忘记密码</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        password: "",
        phone: "",
      },
      // 校验规则
      rules: {
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      // 校验
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let userInfo = {
            username: this.ruleForm.phone,
            password: this.ruleForm.password,
          };
          this.Login(userInfo);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    ...mapActions("userAbout", ["Login"]),
  },
};
</script>

<style lang="scss" scoped>
#login {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
  width: 408px;
  height: 100%;
  overflow: hidden;
  background-color: #34393f;
  .login-wrap {
    width: 348px;
    margin: auto;
    .login-header {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      color: #fff;
      .login-login {
        font-size: 16px;
        padding-left: 10px;
      }
      .login-register {
        font-size: 14px;
        opacity: 0.4;
        a {
          color: #fff;
        }
      }
    }
    .form-body {
      margin-top: 94px;
    }
    .forget-password {
      position: absolute;
      right: 30px;
      font-style: 12px;
      color: #fff;
      opacity: 0.4;
      a {
        color: #fff;
      }
    }
  }
}
</style>>